﻿<common:LayoutAwarePage x:Name="pageRoot"
                        x:Class="RWSBeeldbank.VideoDetailPage"
                        DataContext="{Binding DefaultViewModel, RelativeSource={RelativeSource Self}}"
                        IsTabStop="false"
                        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
                        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                        xmlns:bm="using:Bing.Maps"
                        xmlns:local="using:RWSBeeldbank"
                        xmlns:common="using:RWSBeeldbank.Common"
                        xmlns:data="using:RWSBeeldbank.Data"
                        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
                        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
                        xmlns:mmppf="using:Microsoft.PlayerFramework"
                        xmlns:callisto="using:Callisto.Controls"
                        mc:Ignorable="d" >

    <Page.Resources>
        <common:ListConverter x:Key="ListConverter" />
        <common:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
        <common:StringToVisibilityConverter x:Key="StringToVisibilityConverter" />

        <!-- Collection of items displayed by this page -->
        <CollectionViewSource x:Name="itemsViewSource"
                              Source="{Binding Items}"
                              d:Source="{Binding AllGroups[0].Items, Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}" />
    </Page.Resources>



    <Page.BottomAppBar>
        <AppBar x:Name="PageAppBar"
                Padding="10,0,10,0">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="100*" />
                    <ColumnDefinition Width="50*" />
                </Grid.ColumnDefinitions>
                <StackPanel x:Name="LeftCommands"
                            Orientation="Horizontal"
                            Grid.Column="0"
                            HorizontalAlignment="Left">
                    <Button x:Name="PinMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource PinAppBarButtonStyle}"
                            Click="OnPinMediaObjectButtonClicked" />
                    <Button x:Name="DownloadMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource DownloadAppBarButtonStyle}"
                            Click="OnDownloadMediaObjectButtonClicked" />
                </StackPanel>
                <StackPanel x:Name="RightCommands"
                            Orientation="Horizontal"
                            Grid.Column="1"
                            HorizontalAlignment="Right">
                    <Button x:Name="BrowseToMediaObjectButton"
                            HorizontalAlignment="Left"
                            Style="{StaticResource GlobeAppBarButtonStyle}"
                            Click="OnBrowseToMediaObjectButtonClicked" />
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>

    <!--
        This grid acts as a root panel for the page that defines two rows:
        * Row 0 contains the back button and page title
        * Row 1 contains the rest of the page layout
    -->
    <Grid Style="{StaticResource LayoutRootStyle}"
          DataContext="{Binding Group}"
          d:DataContext="{Binding AllGroups[0], Source={d:DesignInstance Type=data:SampleDataSource, IsDesignTimeCreatable=True}}">

        <Grid.RowDefinitions>
            <RowDefinition Height="140" />
            <RowDefinition Height="*" />
        </Grid.RowDefinitions>

        <!-- Background image -->
        <Image x:Name="image"
               Width="Auto"
               Height="Auto"
               Margin="0,0,0,0"
               Stretch="UniformToFill"
               DataContext="{StaticResource itemsViewSource}"
               Source="{Binding LargeImage}"
               Grid.RowSpan="2" />
        <StackPanel Height="Auto"
                    Width="Auto"
                    Background="{StaticResource ListViewItemOverlayBackgroundThemeBrush}"
                    Grid.RowSpan="2">
        </StackPanel>

        <!-- Back button and page title -->
        <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>
            <Button x:Name="backButton"
                    Click="GoBack"
                    IsEnabled="{Binding Frame.CanGoBack, ElementName=pageRoot}"
                    Style="{StaticResource BackButtonStyle}" />
            <TextBlock x:Name="pageTitle"
                       DataContext="{StaticResource itemsViewSource}"
                       Text="{Binding AltTitle}"
                       Style="{StaticResource PageHeaderTextStyle}"
                       Grid.Column="1" />
            <StackPanel HorizontalAlignment="Right"
                        Margin="0 20 20 0"
                        Grid.Column="1">
                <TextBlock Text="{Binding Title}"
                           Style="{StaticResource SubheaderTextStyle}" />
            </StackPanel>
        </Grid>

        <!--
            The remainder of the page is one large FlipView that displays details for
            one item at a time, allowing the user to flip through all items in the chosen
            group
        -->
        <FlipView x:Name="flipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  TabIndex="1"
                  Grid.Row="1"
                  Margin="-3,-3,0,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource HorizontalScrollViewerStyle}"
                                      Grid.Row="1">

                            <!-- Three-column grid for item-detail layout -->
                            <Grid Margin="120,0,20,20"
                                  Height="Auto">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="400" />
                                    <ColumnDefinition Width="40" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition Width="Auto" />
                                    <ColumnDefinition />
                                </Grid.ColumnDefinitions>

                                <Border Grid.Column="0"
                                        BorderThickness="1"
                                        BorderBrush="White"
                                        Width="400"
                                        Height="300"
                                        VerticalAlignment="Top">
                                    <mmppf:MediaPlayer Source="{Binding VideoFile}"
                                                       Margin="0"
                                                       AutoLoad="False"
                                                       AutoPlay="False" />
                                </Border>

                                <RichTextBlock Margin="0,324,0,0"
                                               Grid.Column="0"
                                               VerticalAlignment="Top"
                                               OverflowContentTarget="{Binding ElementName=NextRTB1}"
                                               ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                               ScrollViewer.VerticalScrollBarVisibility="Disabled">
                                    <Paragraph>
                                        <Run x:Uid="Description"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Omschrijving" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding Description}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="DateCreated"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Realisatie" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding DateCreated}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="Author"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Vervaardiger" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding Author}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="VideoLength"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Video lengte" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding VideoLength}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="VideoFormat"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Video formaat" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding VideoFormat}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="Location"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Lokatie" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <InlineUIContainer>
                                            <Button x:Name="mapButton" Click="mapButton_Click" Visibility="Collapsed">Show map
                                            </Button>
                                        </InlineUIContainer>
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding Location}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                        <Run Text="{Binding GPS}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                        <Run Text="{Binding Province}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="Keywords"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Trefwoorden" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding Keywords}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="InventoryId"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Inventaris nummer" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding Title}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Uid="CopyRight"
                                             FontSize="16"
                                             FontWeight="Bold"
                                             Text="Bronvermelding" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <Run Text="{Binding CopyRight}"
                                             FontSize="16"
                                             FontWeight="SemiLight" />
                                    </Paragraph>
                                    <Paragraph>
                                        <Run x:Name="Rating"
                                             Text="Beoordeling"
                						     FontSize="16"
                						     FontWeight="Bold" />
                                    </Paragraph>
                                    <Paragraph Margin="0,0,0,16">
                                        <InlineUIContainer>
                                            <TextBlock x:Name="AlreadyRated"
                                                           FontSize="18"
                                                           FontWeight="Normal" 
                                                           Foreground="Yellow"
                                                           Text="" />
                                        </InlineUIContainer>
                                        <InlineUIContainer>
                                            <callisto:Rating 
                                                    x:Name="rate" 
                                                    ItemCount="5" 
                                                    Tapped="rate_Tapped" 
                                                    Background="{x:Null}" 
                                                    Foreground="#FFBEC52E" 
                                                    PointerOverFill="#FFE5EF52" 
                                                    PointerPressedFill="#FFEBEF52" 
                                                    HorizontalAlignment="Left" 
                                                    Margin="0"
                                                    />
                                        </InlineUIContainer>
                                    </Paragraph>
                                </RichTextBlock>
                                <RichTextBlockOverflow Grid.Column="2"
                                                       x:Name="NextRTB1"
                                                       Padding="20,0,20,0"
                                                       MaxWidth="440"
                                                       OverflowContentTarget="{Binding ElementName=NextRTB2}"
                                                       ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                                       ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                                <RichTextBlockOverflow Grid.Column="3"
                                                       x:Name="NextRTB2"
                                                       Padding="20,0,20,0"
                                                       MaxWidth="440"
                                                       OverflowContentTarget="{Binding ElementName=NextRTB3}"
                                                       ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                                       ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                                <RichTextBlockOverflow Grid.Column="4"
                                                       x:Name="NextRTB3"
                                                       Padding="20,0,20,0"
                                                       MaxWidth="440"
                                                       ScrollViewer.HorizontalScrollBarVisibility="Disabled"
                                                       ScrollViewer.VerticalScrollBarVisibility="Disabled" />
                            </Grid>

                            <VisualStateManager.VisualStateGroups>
                                <!-- Visual states reflect the application's view state inside the FlipView -->
                                <VisualStateGroup x:Name="ApplicationViewStates">
                                    <VisualState x:Name="FullScreenLandscape" />
                                    <VisualState x:Name="Filled" />

                                    <!-- Respect the narrower 100-pixel margin convention for portrait -->
                                    <VisualState x:Name="FullScreenPortrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="player"
                                                                           Storyboard.TargetProperty="Width">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="400" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>

                                    <!-- When snapped, the content is reformatted and scrolls vertically -->
                                    <VisualState x:Name="Snapped">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="scrollViewer"
                                                                           Storyboard.TargetProperty="Style">
                                                <DiscreteObjectKeyFrame KeyTime="0"
                                                                        Value="{StaticResource VerticalScrollViewerStyle}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <bm:Map Credentials="Agzynzm3397qqkK_hork8zheX6HaP_6Ul9Y4P8xXNhC3Pn1MAKHbOw8QtYsYxx0n"
                									x:Name="myMapTop"
                									ZoomLevel="12"
                									Height="600"
                									Width="600"
                									ShowBuildings="False" 
                                                    Visibility="Collapsed">
            <bm:Map.Center>
                <bm:Location Latitude="52"
                											Longitude="5" />
            </bm:Map.Center>
            <bm:Pushpin x:Name="pushPin">
                <bm:MapLayer.Position>
                    <bm:Location Latitude="49"
                												Longitude="5" />
                </bm:MapLayer.Position>
            </bm:Pushpin>
        </bm:Map>        
        
        
        <!-- FlipView used in portrait mode -->
        <FlipView x:Name="portraitFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="-3,-3,20,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource VerticalScrollViewerStyle}"
                                      Grid.Row="1">

                            <!-- Vertical StackPanel for item-detail layout -->
                            <StackPanel Orientation="Vertical"
                                        Margin="100,0,20,0">
                                <StackPanel Orientation="Vertical">
                                    <Border BorderThickness="1"
                                            BorderBrush="White">
                                        <mmppf:MediaPlayer x:Name="player"
                                                           Source="{Binding VideoFile}"
                                                           Margin="0"
                                                           AutoLoad="False"
                                                           AutoPlay="False" />
                                    </Border>
                                </StackPanel>

                                <StackPanel Orientation="Vertical">
                                    <TextBlock x:Uid="Description"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Omschrijving"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Description}"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="DateCreated"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Realisatie"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding DateCreated}"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Author"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Vervaardiger"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Author}"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="VideoLength"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Video lengte"
                                               Visibility="{Binding VideoLength, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding VideoLength}"
                                               Visibility="{Binding VideoLength, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="VideoFormat"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Video formaat"
                                               Visibility="{Binding VideoFormat, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding VideoFormat}"
                                               Visibility="{Binding VideoFormat, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Location"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Lokatie"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Location}"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Province"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Provincie"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Province}"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Keywords"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Trefwoorden"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Keywords}"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Themes"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Thema's"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Themes}"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="InventoryId"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Inventaris nummer"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Title}"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="CopyRight"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Bronvermelding"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding CopyRight}"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <FlipView x:Name="snappedFlipView"
                  AutomationProperties.AutomationId="ItemsFlipView"
                  AutomationProperties.Name="Item Details"
                  Grid.Row="1"
                  Margin="-3,-3,0,0"
                  SelectionChanged="flipView_SelectionChanged"
                  ItemsSource="{Binding Source={StaticResource itemsViewSource}}"
                  Visibility="Collapsed">

            <FlipView.ItemTemplate>
                <DataTemplate>
                    <UserControl Loaded="StartLayoutUpdates"
                                 Unloaded="StopLayoutUpdates">
                        <ScrollViewer x:Name="scrollViewer"
                                      Style="{StaticResource VerticalScrollViewerStyle}"
                                      Grid.Row="1">

                            <!-- Vertical StackPanel for item-detail layout -->
                            <StackPanel Orientation="Vertical"
                                        Margin="20,0,20,0">
                                <StackPanel Orientation="Vertical">
                                    <Border BorderThickness="1"
                                            BorderBrush="White">
                                        <mmppf:MediaPlayer x:Name="player"
                                                           Source="{Binding VideoFile}"
                                                           Margin="0"
                                                           AutoLoad="False"
                                                           AutoPlay="False" />
                                    </Border>
                                </StackPanel>
                                <StackPanel Orientation="Vertical">
                                    <TextBlock x:Uid="Description"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Omschrijving"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Description}"
                                               Visibility="{Binding Description, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="DateCreated"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Realisatie"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding DateCreated}"
                                               Visibility="{Binding DateCreated, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Author"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Vervaardiger"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Author}"
                                               Visibility="{Binding Author, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="VideoLength"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Video lengte"
                                               Visibility="{Binding VideoLength, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding VideoLength}"
                                               Visibility="{Binding VideoLength, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="VideoFormat"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Video formaat"
                                               Visibility="{Binding VideoFormat, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding VideoFormat}"
                                               Visibility="{Binding VideoFormat, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Location"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Lokatie"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Location}"
                                               Visibility="{Binding Location, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Province"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Provincie"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Province}"
                                               Visibility="{Binding Province, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Keywords"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Trefwoorden"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Keywords}"
                                               Visibility="{Binding Keywords, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="Themes"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Thema's"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Themes}"
                                               Visibility="{Binding Themes, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="InventoryId"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Inventaris nummer"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding Title}"
                                               Visibility="{Binding Title, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                    <TextBlock x:Uid="CopyRight"
                                               Style="{StaticResource TitleTextStyle}"
                                               FontWeight="Bold"
                                               Text="Bronvermelding"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}" />
                                    <TextBlock Style="{StaticResource ItemTextStyle}"
                                               Text="{Binding CopyRight}"
                                               Visibility="{Binding CopyRight, Converter={StaticResource StringToVisibilityConverter}}"
                                               Margin="0,0,0,16"
                                               TextWrapping="Wrap" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </UserControl>
                </DataTemplate>
            </FlipView.ItemTemplate>
        </FlipView>

        <VisualStateManager.VisualStateGroups>

            <!-- Visual states reflect the application's view state -->
            <VisualStateGroup x:Name="ApplicationViewStates">
                <VisualState x:Name="FullScreenLandscape" />
                <VisualState x:Name="Filled" />

                <!-- The back button respects the narrower 100-pixel margin convention for portrait -->
                <VisualState x:Name="FullScreenPortrait">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource PortraitBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="portraitFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>

                <!-- The back button and title have different styles when snapped -->
                <VisualState x:Name="Snapped">
                    <Storyboard>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="backButton"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedBackButtonStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="pageTitle"
                                                       Storyboard.TargetProperty="Style">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="{StaticResource SnappedPageHeaderTextStyle}" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="flipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Collapsed" />
                        </ObjectAnimationUsingKeyFrames>
                        <ObjectAnimationUsingKeyFrames Storyboard.TargetName="snappedFlipView"
                                                       Storyboard.TargetProperty="Visibility">
                            <DiscreteObjectKeyFrame KeyTime="0"
                                                    Value="Visible" />
                        </ObjectAnimationUsingKeyFrames>
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
    </Grid>
</common:LayoutAwarePage>
